<template>
	<view>
		<page-header :team-id="teamId" :disabled="false">
			<view class="cat2bug-view">
				<CREATE v-if="log.defectLogType==='CREATE'" :show-describe="false" :log="log"></CREATE>
				<IMPORT v-else-if="log.defectLogType==='IMPORT'" :show-describe="false" :log="log"></IMPORT>
				<ASSIGN v-else-if="log.defectLogType==='ASSIGN'" :show-describe="false" :log="log"></ASSIGN>
				<REJECTED v-else-if="log.defectLogType==='REJECTED'" :show-describe="false" :log="log"></REJECTED>
				<REPAIR v-else-if="log.defectLogType==='REPAIR'" :show-describe="false" :log="log"></REPAIR>
				<PASS v-else-if="log.defectLogType==='PASS'" :show-describe="false" :log="log"></PASS>
				<OPEN v-else-if="log.defectLogType==='OPEN'" :show-describe="false" :log="log"></OPEN>
				<CLOSED v-else-if="log.defectLogType==='CLOSED'" :show-describe="false" :log="log"></CLOSED>
				<UPDATE v-else-if="log.defectLogType==='UPDATE'" :show-describe="false" :log="log"></UPDATE>
			</view>
		</page-header>
		<page-body>
			<template v-slot:header>
				<uni-section v-if="log.defectLogDescribe" :title="$t('describe')" type="line" class="first-section">
					<view class="cat2bug-view">
						<text>{{log.defectLogDescribe}}</text>
					</view>
				</uni-section>
				<uni-section :title="$t('comment')" type="line" class="comment"></uni-section>
			</template>
			<template v-slot:content>
				<uni-list>
					<uni-swipe-action
						v-for="(comment, commentIndex) in log.commentList"
						:key="commentIndex">
						<uni-swipe-action-item
							<uni-list-item>
								<template v-slot:body>
									<view class="col">
										<view class="row">
											<member-avatar :member="comment.createMember"></member-avatar>
											<view class="col">
												<text class="name">{{ comment.createMember.nickName }}</text>
												<text class="time">{{ createTime(comment.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</text>
											</view>
										</view>
										<text class="cat2bug-text">{{comment.commentContent}}</text>
									</view>
								</template>
							</uni-list-item>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</uni-list>
			</template>
			<template v-slot:footer>
				<button type="primary" class="full-width" data-position="bottom" @click="handleOpenAddComment">留言</button>
			</template>
		</page-body>
		<uni-popup ref="add-comment" :is-mask-click="true">
			<uni-nav-bar left-icon="left" title="添加评论" rightText="添加" @clickLeft="handleHideAddComment" @clickRight="handleAddComment"/>
			<view class="comment-input">
				<uni-easyinput
					type="textarea"
					v-model="addCommentValue"
					maxlength="255"
					:adjust-position="true"
					:inputBorder="false"></uni-easyinput>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getLog} from "@/api/system/log";
	import {addComment} from "@/api/system/comment";
	import {parseTime} from "@/utils/ruoyi"
	import CREATE from "@/subpackage/components/defect/defect-log/create.vue";
	import IMPORT from "@/subpackage/components/defect/defect-log/import.vue"
	import ASSIGN from "@/subpackage/components/defect/defect-log/assign.vue"
	import REJECTED from "@/subpackage/components/defect/defect-log/reject.vue";
	import REPAIR from "@/subpackage/components/defect/defect-log/repair.vue";
	import PASS from "@/subpackage/components/defect/defect-log/pass.vue";
	import CLOSED from "@/subpackage/components/defect/defect-log/close.vue";
	import OPEN from "@/subpackage/components/defect/defect-log/open.vue";
	import UPDATE from "@/subpackage/components/defect/defect-log/update.vue";
	import MemberAvatar from "@/components/member/member-avatar/index.vue"
	export default {
		name: 'DefectLogDetail',
		components: { CREATE,IMPORT,ASSIGN,REJECTED,REPAIR,PASS,CLOSED,OPEN,UPDATE, MemberAvatar },
		data() {
			return {
				defectLogId: null,
				// 日志
				log: {},
				// 添加的评论值
				addCommentValue: null,
				styles: {
					backgroundColor: 'white',
					padding: '30px',
					height: '500px',
				}
			}
		},
		computed: {
			commentPermi: function() {
			    return this.showComment && checkPermi(['system:defect:list']);
			},
			createTime: function() {
				return function(time) {
					return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
				}
			}
		},
		onLoad(option) {
			this.defectLogId = option.defectLogId;
			this.getLog();
		},
		methods: {
			/** 获取日志 */
			getLog() {
				getLog(this.defectLogId).then(res=>{
					this.log = res.data;
				})
			},
			/** 打开添加评论弹框 */
			handleOpenAddComment() {
				this.addCommentValue = null;
				this.$refs['add-comment'].open('bottom');
			},
			handleAddComment() {
				addComment({
					commentContent: this.addCommentValue,
					moduleType: 'defect_log',
					correlationId: this.defectLogId
				}).then(res=>{
					uni.showToast({
						title: this.$i18n.t('comment.submit-success').toString(),
						duration: 2000
					});
					this.getLog();
					this.$refs['add-comment'].close();
				});
			},
			handleHideAddComment() {
				this.$refs['add-comment'].close();
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content-textarea {
	height: 300rpx;
}
.comment-input {
	background-color: $uni-bg-color;
	padding: 20rpx 30rpx;
}
.comment > ::v-deep .uni-section {
	height: 84rpx;
}
.name {
  font-weight: 500;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
}
.time {
  flex-shrink: 0;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}
</style>